<template>

  <div>

    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="计划详情"
        left-arrow
        @click-left="sy"
        fixed
    />


    <!-- 工单信息 -->
    <div class="ticket-list">
      <div class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">工单编号：{{ datas.code }}</div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            工作班组: {{ datas.worker }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            开始时间: {{ datas.planbegintime}}
          </div>
        </div>

        <div class="ticket-header">
          <div class="ticket-id">
            处理时限: {{ datas.timelimit}}<span v-if="datas.timelimit!=null">小时</span>
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            结束时间: {{ datas.dispatchtime}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            执行频率: {{ datas.frequency}}
          </div>
        </div>

        <div class="ticket-header">
          <div class="ticket-id">
            关联模块:<span v-if="datas.type==1">诊室保洁模块</span>
            <span v-if="datas.type==2">诊室维修模块</span>
            <span v-if="datas.type==3">诊室清洁模块</span>
          </div>
        </div>

        <div style="margin-top: 10px">
          <p>保洁内容</p>
          <table border="1px" cellspacing="0px" style="margin-left: 15px;margin-right: 15px">
            <tr>
              <th style="width: 40px ;height: 30px">序号</th>
              <th style="width: 150px">保洁项</th>
              <th style="width: 150px">位置</th>
            </tr>
            <tr v-for="item in data" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.cleaningtasks }}</td>
              <td>{{ item.address }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div style="margin-top: 50px">
      <van-button type="primary" @click="fh" style="background-color: #1989fa;width: 90%;border-radius: 25px"
                  size="large">返回
      </van-button>
    </div>


  </div>

</template>

<script>
export default {
  name: "Workorderbjjhxq",
  data() {
    return {
      datas: {},
      data:[],
      pid:0,
      names:''
      }
    },
  created() {
    this.list();
    this.list1();

  },
  methods: {



    fh(){
      this.$router.push('/workorderbjjh')
    },

    sy(){
      this.$router.push('/workorderbjjh')
    },

    list() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/findById?id=` + this.$route.query.id).then(res => {
        this.datas = res.data.data;
        console.log(this.data);
        if (this.datas.url != null) {
          this.img = this.datas.url.split(",");
          console.log(this.img);
        }
        this.a = 1;
      })
    },
    list1() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/cleaningtasks/list`).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    },
  }
}
</script>



<style scoped>

.details-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.ticket-list {
  padding: 12px;
  margin-top: 50px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

#app {
  margin-top: -20px;
}

.title {
  height: 30px;
}

#zt {
  float: right;
  margin-right: 25px;
}

</style>